<template>
	<div class="upload-file-one-wrap">
		<template v-if="!url || noPreview">
			<Upload
			:on-progress='uploadProgress'
				:action="import_url"
				:headers="headers"
				:on-error="uploadErr"
				:format="format"
				:on-success="uploadSuccess"
				:on-format-error="formatError"
				:name="type == 'img' ? 'image' : 'file'"
				:show-upload-list="false"
			>
				<div class="upload-btn">
					<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
					<p>点击或者拖拽文件上传</p>
				</div>
			</Upload>
		</template>
		<template v-else>
			<div class="look-img" v-if="type == 'img'">
				<img :src="url" style="width: 100%" />
				<div class="demo-upload-list-cover">
					<Icon type="ios-eye-outline" @click.native="lookFile"></Icon>
					<Icon type="ios-trash-outline" @click.native="deleteFile"></Icon>
				</div>
			</div>
			<div v-else>
				<a @click="lookFile">查看</a>
				<a @click="deleteFile" style="color: #ed4014; margin-left: 10px">删除</a>
			</div>
		</template>

		<div class="tips">
			{{ tips }}
		</div>
	</div>
</template>

<script>
import utils from '@/utils'

export default {
  name: 'upload-file-one',
  props: {
    tips: {
      type: [String],
      default: '* 推荐大小750*800'
    },
    // 文件类型，分为图片和其他， img图片，file文件
    type: {
      type: [String, Number],
      default: 'img'
    },
    // 父组件默认带出值
    defaultUrl: {
      type: [String, Number],
      default: ''
    },
    // 不显示预览图
    noPreview: {
      type: Boolean,
      default: false
    },
    format: {
      type: [Array],
      default: () => []
    }
  },
  data () {
    return {
      url: '' // 上传后路径
    }
  },
  methods: {
    uploadProgress (event, file, fileList) {
      this.$Spin.show()
    },
    // 上传成功
    uploadSuccess (res) {
      this.$Spin.hide()
      this.$Message.success('上传成功')
      this.url = res.url
      this.$emit('on-success', res)
      this.$emit('on-change', this.url)
    },

    // 上传失败
    uploadErr (error, file, fileList) {
      this.$Spin.hide()
      if (file.status_code == 401) {
        localStorage.removeItem('token')
        return this.$router.push({
          name: 'login'
        })
      }
      this.$Modal.error({
        title: '提示',
        content: '文件上传失败，请重试'
      })
      this.$emit('on-error', err)
    },
    formatError () {
      this.$Modal.error({
        title: '提示',
        content: `文件上传失败,请上传${this.format.join(',')}格式的文件`
      })
    },
    // 查看文件
    lookFile () {
      const a = document.createElement('a')
      document.body.appendChild(a)
      a.target = '_blank'
      a.href = this.url
      a.click()
      document.body.removeChild(a)
    },
    // 删除文件
    deleteFile () {
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除文件？',
        onOk: () => {
          this.url = ''
        }
      })
    }
  },
  watch: {
    url (val) {
      this.$emit('on-change', this.url)
    },
    defaultUrl (val) {
      this.url = this.defaultUrl
    }
  },
  computed: {
    import_url () {
      return this.type == 'img'
        ? process.env.VUE_APP_API_URL + '/upload/image'
        : process.env.VUE_APP_API_URL + '/upload/file'
    },
    headers () {
      return {
        authorization: localStorage.getItem('token')
      }
    }
  },
  created () {
    // 如果是父组件默认有了值，回填
    if (this.defaultUrl) {
      this.url = this.defaultUrl
    }
  }
}
</script>

<style scoped lang="less">
	.upload-file-one-wrap {
		.upload-btn {
			cursor: pointer;
			padding: 20px 20px;
			border-radius: 5px;
			border: 1px dashed #dcdee2;
			text-align: center;
		}
		.upload-btn:hover {
			transition: all 0.2s;
			box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.1);
		}

		.look-img {
			display: flex;
			align-items: center;
			width: 150px;
			height: 150px;
			border: 1px dashed rgba(197, 197, 197, 1);
			text-align: center;
			justify-content: space-evenly;
			position: relative;
			overflow: hidden;
		}

		.demo-upload-list-cover {
			display: none;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.6);
			text-align: center;
		}

		.look-img:hover .demo-upload-list-cover {
			display: block;
		}

		.demo-upload-list-cover i {
			line-height: 150px;
			color: #fff;
			font-size: 20px;
			cursor: pointer;
			margin: 0 2px;
		}

		.demo-spin-icon-load {
			animation: ani-demo-spin 1s linear infinite;
		}
	}
</style>
